<template>
  <!--外层的template在编译后不会产生新的元素的-->
  <template v-for="(item, index) in state.arr">
    <!--在template内部判断变量是否满足渲染条件-->
    <div :key="index" v-if="item.show">
      <p>姓名：{{ item.name }}</p>
    </div>
  </template>
</template>
<script>
import {reactive} from 'vue'
export default{
  setup(){
    const state = reactive({
      arr:[
        {
          name:'尼克',
          show:true
        },
        {
          name:'十三',
          show:false
        }
      ]
    })
    return {state}
  }
}
</script>